<template>
  <el-form :model="userDetailsRecord" label-position="right" label-width="120px" class="common-page-a4">
    <el-row class="m-b-10">
      <el-col :span="24">
        <h3>
          <img :src="common.getFileView(userDetailsRecord.avatar)" class="common-round-image-32" data-default="avatar" style="margin-left:5px;vertical-align: middle;" @error="handleImageError">
          {{ userDetailsRecord.realName }}
          <span style="font-size: 12px; color: #C0C4CC; margin-left: 10px;">{{ userDetailsRecord.nickName }}</span>
        </h3>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="用户名:"> {{ userDetailsRecord.userName }}</el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="员工编号:"> {{ userDetailsRecord.userCode }} </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="用户状态:">
          <span v-if="userDetailsRecord.isLocked===0" class="color-primary">正常</span>
          <span v-if="userDetailsRecord.isLocked===1" class="color-danger">锁定</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="创建时间:"> {{ userDetailsRecord.gmtCreated | formatDate }}</el-form-item>
      </el-col>
    </el-row>
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="user">
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名:">{{ userDetailsRecord.realName }} </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机:">{{ userDetailsRecord.mobile }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账号:">{{ userDetailsRecord.userName }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分类:">{{ userDetailsRecord._category }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别:">
              <span v-if="userDetailsRecord.gender===1">男</span>
              <span v-if="userDetailsRecord.gender===2">女</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话:">{{ userDetailsRecord.phone }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱:">{{ userDetailsRecord.email }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="微信:">{{ userDetailsRecord.weixin }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="QQ:">{{ userDetailsRecord.qq }}</el-form-item>
          </el-col>
        </el-row>
        <div class="common-title m-b-20"><h2 class="bold">三方绑定</h2></div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="钉钉:">
              <span v-if="userDetailsRecord.dingTalkUserId" class="color-primary">{{ userDetailsRecord.dingTalkUserId }}</span>
              <span v-if="!userDetailsRecord.dingTalkUserId" class="color-danger">还未绑定</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业微信:">
              <span v-if="userDetailsRecord.wxWorkUserId" class="color-primary">{{ userDetailsRecord.wxWorkUserId }}</span>
              <span v-if="!userDetailsRecord.wxWorkUserId" class="color-danger">还未绑定</span>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="common-title m-b-20"><h2 class="bold">员工信息</h2></div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="内部员工:">
              <span v-if="userDetailsRecord.isInner===0" class="color-danger">否</span>
              <span v-if="userDetailsRecord.isInner===1" class="color-primary">是</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="通讯录:" prop="isAddMailList">
              <span v-if="userDetailsRecord.isAddMailList===0" class="color-danger">否</span>
              <span v-if="userDetailsRecord.isAddMailList===1" class="color-primary">是</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="员工编号:">
              {{ userDetailsRecord.userCode }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件号码:">
              {{ userDetailsRecord.idNumber }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-table
          :data="userDetailsRecord.upmsOrganizations "
          style="width: 100%">
          <el-table-column prop="addTime" width="150" label="加入时间">
            <template slot-scope="scope">{{ scope.row.addTime | formatDate }}</template>
          </el-table-column>
          <el-table-column prop="_fullOrgName" label="组织" :show-overflow-tooltip="true" min-width="180" />
          <el-table-column label="职务" prop="orgJob" width="100" :show-overflow-tooltip="true">
            <template slot-scope="scope">{{ scope.row.orgJob }}</template>
          </el-table-column>
          <el-table-column prop="orgPhone" :show-overflow-tooltip="true" width="160" label="电话" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="扩展信息" name="userDetail">
        <el-row>
          <el-col :span="12">
            <el-form-item label="民族:">{{ userDetailsRecord._nation }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="籍贯:">{{ userDetailsRecord._nativePlaceLevel1+userDetailsRecord._nativePlaceLevel2+userDetailsRecord._nativePlaceLevel3 }} </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入职时间:">{{ userDetailsRecord.startWorkDate | formatDate('yyyy-MM-dd') }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人员编制:">{{ userDetailsRecord.staffing }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="政治面貌:">{{ userDetailsRecord._politicalOutlook }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文化程度:">{{ userDetailsRecord._educationDegree }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="婚姻状况:">{{ userDetailsRecord._maritalStatus }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所学专业:">{{ userDetailsRecord._major }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="毕业院校:">{{ userDetailsRecord.graduateSchool }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最高学位:">{{ userDetailsRecord.highestDegree }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学历:">{{ userDetailsRecord._education }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="座机:">{{ userDetailsRecord.phone }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="紧急联系:">{{ userDetailsRecord.emergencyContact }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="紧急电话:">{{ userDetailsRecord.emergencyContactMobile }} </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="现住址:">
          {{ userDetailsRecord._currentResidenceLevel1+ userDetailsRecord._currentResidenceLevel2+userDetailsRecord._currentResidenceLevel3+userDetailsRecord._currentResidenceLevel4 }}
          {{ userDetailsRecord.currentAddress }}
        </el-form-item>
        <el-form-item label="自我介绍:">{{ userDetailsRecord.introduction }}</el-form-item>
        <el-form-item label="个性签名:">{{ userDetailsRecord.signature }}</el-form-item>
        <el-form-item label="技能/特长">{{ userDetailsRecord._skill }} </el-form-item>
        <el-form-item v-if="userDetailsRecord.tag" label="标签">
          <el-tag v-for="item in userDetailsRecord.tag.split(',')" :key="item" effect="plain" type="info" style="margin-right: 5px">{{ item }}</el-tag>
        </el-form-item>

      </el-tab-pane>
      <el-tab-pane label="授权信息" name="auth">
        <el-row>
          <el-col :span="24">
            <el-form-item label="授权角色：">
              <el-tag v-for="item in userDetailsRecord.upmsRoles" :key="item.id" style="margin-right:10px">{{ item.name }}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="授权权限：">
              <div>共<span class="color-danger" style="margin:0 3px">{{ defaultCheckedKeys.length }}</span>个权限</div>
              <el-tabs v-model="permissionCategory" class="common-tabs" @tab-click="handlePermissionTabClick">
                <el-tab-pane label="PC应用" name="0" />
                <el-tab-pane label="移动应用" name="1" />
              </el-tabs>
              <div style="max-height: 280px; overflow: auto;">
                <el-tree
                  ref="menuTree"
                  class="common-el-tree"
                  :data="permissionData"
                  show-checkbox
                  :check-strictly="false"
                  node-key="id"
                  :default-expand-all="true"
                  :default-checked-keys="[]"
                  :expand-on-click-node="false"
                  :props="{children: 'permissionVos',label: 'name'}">
                  <span slot-scope="{ node }" class="custom-tree-node">
                    <span class="text">
                      {{ node.label }}&nbsp;
                      <span class="color-primary">&nbsp;({{ node.data.permissionValue }})</span>
                    </span>

                  </span>
                </el-tree>
              </div>

            </el-form-item>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="操作信息" name="cz">
        <el-row>
          <el-col :span="12">
            <el-form-item label="最后登录时间:">{{ userDetailsRecord.lastLoginTime }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最后登录IP:">{{ userDetailsRecord.lastLoginAddress }}</el-form-item>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

  </el-form>
</template>
<script>
export default {
  data() {
    return {
      activeName: 'user',
      userDetailsRecord: {
        permission: [],
        role: [],
        departments: []
      },
      permissionCategory: '0',
      permissionData: [],
      defaultCheckedKeys: []

    }
  },
  methods: {
    async init({ user, organizations, roles }) {
      this.activeName = 'user'
      var userLoginHistory = await this.$store.dispatch('userLoginHistoryPage', {
        userName: user.userName,
        sort: '-gmtCreated',
        limit: 1,
        page: 1
      })
      var userLoginHistories = userLoginHistory.records
      this.userDetailsRecord = {
        ...user,
        upmsOrganizations: organizations,
        upmsRoles: roles,
        lastLoginTime: userLoginHistories.length > 0 ? this.T.formatDate(userLoginHistories[0].gmtCreated) : '-',
        lastLoginAddress: userLoginHistories.length > 0 ? userLoginHistories[0].loginAddress + '(' + userLoginHistories[0].loginIp + ')' : '-'
      }
      this.fetchPermissionuTreeTable()
    },
    handlePermissionTabClick() {
      this.fetchPermissionuTreeTable()
    },
    async fetchPermissionuTreeTable() {
      var userId = this.userDetailsRecord.id
      const permissions = await this.$store.dispatch('permissionTreeTable', { sort: '+orders', category: this.permissionCategory })
      this.permissionData = permissions
      this.setDisabled(this.permissionData)
      const response = await this.$store.dispatch('listPermissionByUserId', userId)
      this.defaultCheckedKeys = []
      response.all.forEach(item => {
        this.defaultCheckedKeys.push(item.id)
      })
      this.$refs.menuTree.setCheckedKeys(this.defaultCheckedKeys)
    },
    setDisabled(treeData) {
      treeData.forEach((item) => {
        this.$set(item, 'disabled', true)
        if (item.permissionVos) {
          this.setDisabled(item.permissionVos)
        }
      })
    }
  }
}
</script>
